<template lang="html">
  <div id="pageBox" class="pd14">
    <div class="moneyBox cl">
      <div class="money fl">
        <p class="sum">¥ 0.00</p>
        <p class="note">当前余额 (元)</p>
      </div>
      <div class="cashOut fr">
        去提现
      </div>
      <i class="iconfont icon-rjt jtr"></i>
    </div>
    <div class="spreadList">
      <!-- <div class="spreadItem">
        <img :src="genQrcode" />
      </div> -->
      <div class="title">推广商品</div>
      <div v-for="(item, index) in hotList" :key="index" class="list-item" @click="goToPage(item.id)">
        <img class="list-item-img" :src="item.coverImg">
        <div class="list-item-main">
          <p class="list-item-title">"{{ item.title }}"</p>
          <span class="list-item-price">推广佣金: ￥24.00</span>
          <span class="list-item-tg">去推广→</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HotList from "@/components/hotList";
import { getNewHot } from '@/api/project'
import { getGeneralize } from '@/api/user'
export default {
  data(){
    return {
      genQrcode: '',
      hotList: [],
      form: {
        page: 1,
        limit: 10
      }
    }
  },
  components:{
    HotList,
  },
  created() {
    getGeneralize().then(res => {
      this.genQrcode = res.url
    })
    this.getList()
  },
  methods:{
    goToPage(id){
      let query = {
        id
      }
      this.$router.push({
        path:"/generalize",
        query
      })
    },
    onMore() {
      this.form.page++
      this.getList()
    },
    getList() {
      getNewHot('hottest', this.form).then(res => {
        this.hotList = res.page.list
      })
    }
  }
}
</script>

<style lang="less" scoped>
  #pageBox{
    background: #fff;
    height: 100%;
    .header{
      border-bottom:1px solid #dedede;
      line-height: 0.88rem;
      padding:20px 0;
      .userImg{
        float:left;
        width:0.88rem;
        height:0.88rem;
        background:#999;
        border-radius: 50%;
        overflow: hidden;
      }
      .username{
        float:left;
        font-size:0.2rem;
        margin:0 0.05rem 0 0.1rem;
      }
      .note{
        float:left;
        height:0.16rem;
        line-height: 0.16rem;
        padding:0 0.03rem;
        border:1px solid #2BD54D;
        font-size:0.12rem;
        color:#2BD54D;
        border-radius: 0.09rem;
        margin-top:0.34rem;
      }
      .rareBook{
        float:right;
        height:0.24rem;
        line-height: 0.24rem;
        border-radius: 0.15rem;
        font-size:0.12rem;
        padding:0 0.12rem;
        background:#FF6685;
        color:#fff;
        margin-top:0.3rem;
      }
    }
    .moneyBox{
      position:relative;
      padding:0.2rem 0;
      border-bottom:1px solid #dedede;
      .money{
        .sum{
          font-size:0.26rem;
          color:#FF6685;
          font-weight: 400;
        }
        .note{
          color:#999;
          font-size:0.12rem;
        }
      }
      .cashOut{
        // color:#FF6685;
        color:#999;
        text-decoration: line-through;
        position:absolute;
        top:50%;
        line-height: 0.2rem;
        right:0.3rem;
        transform:translateY(-50%);
      }
      .jtr{
        position:absolute;
        top:50%;
        right:0;
        transform:translateY(-50%);
        font-size:0.24rem;
        color:#999;
      }
    }
    .spreadList{
      margin-top:10px;
      .title{
        font-size:0.16rem;
        margin-bottom:0.1rem;
      }
      .spreadItem{
        width: 100%;
        img{
          width: 100%;
        }
      }
    }
  }
  .list-item{
    overflow: hidden;
    margin-bottom: .2rem;
    .list-item-img{
      float: left;
      display: block;
      width: 1.64rem;
      height: 1rem;
    }
    .list-item-main{
      padding-left: 1.76rem;
    }
    .list-item-title{
      font-size: .2rem;
      height: .6rem;
      overflow: hidden;
      color: #232323;
      font-weight: bold;
      line-height: .3rem;
    }
    .list-item-price{
      color: #888;
      font-size: .13rem;
      line-height: 1.7;
    }
    .list-item-tg{
      font-size: .13rem;
      color: red;
      display: block;
      float: right;
      line-height: 2;
    }
  }

</style>
